<template>
  <el-dialog class="order" width="60%" title="订单详情" :visible.sync="showDia" @close="handleClose">
    <div class="card">
      <h3 class="title">发货信息</h3>
      <div>订单号: {{order.no}}</div>
      <div>下单时间: {{order.created_at}}</div>
      <div>订单状态: {{mapFlag(order.flag)}}</div>
    </div>

    <div class="card">
      <h3 class="title">买家信息</h3>
      <el-row :span="20" v-if="order.address">
        <el-col :span="8">
          <span>用户: {{order.user.nickname}}</span>
        </el-col>
        <el-col :span="8">
          <span>电话: {{order.user.phone}}</span>
        </el-col>
      </el-row>
    </div>

    <div class="card">
      <h3 class="title">收货信息</h3>

      <el-row :span="20" v-if="order.address">
        <el-col :span="8">
          <span>联系人: {{order.address.contact_name}}</span>
        </el-col>
        <el-col :span="8">
          <span>联系电话: {{order.address.contact_phone}}</span>
        </el-col>
        <el-col :span="8">
          <span>详细地址: {{order.address.address}}</span>
        </el-col>
      </el-row>
      <el-row :span="20" v-else>
        <el-col :span="8">
          <span>联系人:</span>
        </el-col>
        <el-col :span="8">
          <span>联系电话:</span>
        </el-col>
        <el-col :span="8">
          <span>详细地址:</span>
        </el-col>
      </el-row>
      <div>买家留言: {{order.remark}}</div>
    </div>

    <div class="card" v-if="(order.flag >= 7)">
      <h3 class="title">发货信息</h3>
      <div v-html="showShipData"></div>
    </div>

    <div class="card">
      <h3 class="title">商品信息</h3>
      <el-table :data="order.items" stripe style="width: 100%">
        <el-table-column label="商品描述" width="200" align="center">
          <template slot-scope="scope">
            <div style="flex-direction: row;align-items: center;">
              <img
                :src="scope.row.snapshot.cover"
                style="width:40px;height:40px;vertical-align: middle;"
              >
              <span style="margin-left: 10px">{{ scope.row.snapshot.title }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="auto" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.snapshot.sku }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价" width="auto" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.snapshot.price}}</div>
          </template>
        </el-table-column>
        <el-table-column width="auto" label="数量" align="center">
          <template slot-scope="scope">
            <span
              v-if="scope.row.snapshot.is_special"
            >{{scope.row.amount*parseFloat(scope.row.snapshot.extra) | numFilter}} 米</span>
            <span v-else>{{scope.row.amount}}</span>
          </template>
        </el-table-column>
        <el-table-column label="小计" width="200px">
          <template slot-scope="scope">
            <div
              v-if="scope.row.snapshot.is_special"
            >{{ scope.row.snapshot.price*scope.row.amount*parseFloat(scope.row.snapshot.extra) | numFilter}}</div>
            <div v-else>{{ scope.row.snapshot.price*scope.row.amount | numFilter}}</div>
            <!-- <div
              style="margin-left: 10px"
            >{{ (scope.row.snapshot.price*scope.row.amount) | numFilter}}</div>-->

            <div v-if="isRefund(scope.row.refund_status)">
              已退款：
              <span style="color:red;">{{scope.row.refund_amt}}</span> 元
            </div>
            <div v-if="isRefund(scope.row.refund_status)">
              备注:
              <span>{{scope.row.refund_remark}}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="auto" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="! isRefund(scope.row.refund_status)"
              type="danger"
              @click="handleRefund(scope.row)"
            >退款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top:20px">
        <span
          style="font-size:14px;float:right"
        >共 1 件商品 合计：￥{{order.total_amount}}（含运费：￥{{order.freight}}）</span>
      </el-row>
    </div>

    <div class="card" v-if="order.address">
      <h3 class="title" style="margin-bottom:10px;">快递信息</h3>
      <el-row>
        <el-col :span="6">
          <el-select v-model="shipType" placeholder="请选择" @change="shipTypeChange">
            <el-option label="自填快递单" value="manual"></el-option>
            <el-option label="达达" value="dada" v-if="order.merchant.shop_no"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <div v-if="shipType == 'dada'">
        <div>订单号：{{order.no}}</div>
        <div>预估运费：{{forecastFee.fee == -1 ? '计算中...' : forecastFee.fee + '元'}}</div>
        <div v-if="forecastFee.distance">预估距离：{{mapDistance(forecastFee.distance) + '公里'}}</div>
        <div>收货地址：{{order.address.address}}</div>
        <div>收货人： {{order.address.contact_name}}</div>
        <div>联系电话： {{order.address.contact_phone}}</div>
        <div>期望送达时间： {{order.expect_ship_at}}</div>
      </div>
    </div>

    <div class="card" v-if="shipType == 'manual'">
      <el-row>
        <div>
          <h3 class="title">填写物流或者自取信息</h3>
          <el-input type="textarea" :rows="6" placeholder="请输入" v-model="shipData"></el-input>
        </div>
      </el-row>
    </div>

    <div class="card">
      <el-row style="text-align:right; margin-top:10px;">
        <el-button ref="shipBtn" :disabled="disableShip" type="primary" @click="handleShip">发货</el-button>
      </el-row>
    </div>

    <refund ref="refund" @refresh="handleRefresh" :type="type"></refund>
    <order-print ref="orderPrint"></order-print>
  </el-dialog>
</template>

<script>
/* eslint-disable */
import { isNull, arr2pojo, obj2pojo, validateResponse } from "@/util/util";
import { successMsg, errorMsg } from "@/util/message"
import refund from "./refund"
import orderPrint from "./order_print"


export default {
  name: "detailShip",
  props: {
    'method': {
      default: 'showOrder'
    },
    type: {
      default: 1
    }
  },
  components: {
    refund, orderPrint
  },
  computed: {
    showShipData() {
      if (isNull(this.order.ship_data)) return ''
      let reg = new RegExp("\n", "g");
      let str = this.order.ship_data.replace(reg, "<br>");
      return str
    },

  },
  filters: {
    numFilter: function (value) {
      let realVal = Number(value).toFixed(2)
      return realVal
    }
  },
  data() {
    return {
      showDia: false,
      order: "",
      refund: {
        special: ''
      },
      forecastFee: { // 预估运费
        fee: -1,
        deliveryNo: ''
      },
      id: 0,
      shipData: '',
      shipType: 'manual',
      disableShip: false
    }
  },
  methods: {
    mapFlag(value) {
      var result = ''
      let flag = [
        { label: '待付款', value: 0 },
        { label: '订单取消', value: 1 },
        { label: '等待发货', value: 2 },
        { label: '等待发货', value: 3 },
        { label: '订单取消', value: 4 },
        { label: '待用户确认取消', value: 5 },
        { label: '订单取消', value: 6 },
        { label: '已发货', value: 7 },
        { label: '已完成', value: 8 },
      ]
      flag.forEach(element => {
        if (element.value == value)        {
          result = element.label
          return false
        }
      });

      return result
    },
    mapDistance(value) {
      return (value / 1000).toFixed(2);
    },
    handleRefresh() {
      this.handleShow(this.id)
    },
    handleShow(id, type) {
      this.id = id
      //this.shipType = type
      this.showDia = true
      this.$store.dispatch(this.method, { id: id, type: this.type }).then(res => {
        if (res.data.status == 1)
        {
          this.order = res.data.result.data
          //可以为达达
          if (this.order.merchant.shop_no)          {
            this.shipType = 'dada'
            this.$store.dispatch('GetQueryDeliverFee', { id: id, type: this.shipType }).then(res => {
              if (res.data.status == 1)
              {
                this.disableShip = false
                this.forecastFee = res.data.result
              }
              else              {
                this.disableShip = true
                this.forecastFee = {
                  fee: -1,
                  deliveryNo: '',
                  distance: ''
                }
                return errorMsg(this, res.data.message)

              }
            })
          }
        }
        else        {
          this.order = []
        }
      })

    },
    handleClose() {
      this.showDia = false
      this.order = []
      this.shipData = ''
    },
    handleRefund(row) {
      this.$nextTick(() => {
        this.$refs.refund.handleShow(row)
      })
    },
    isRefund(status) {
      return status != 0
    },
    showPrint(row) {
      this.$nextTick(() => {
        this.$refs.orderPrint.handleShow(row)
      })
    },
    shipTypeChange(val)
    {
       console.log(val)
       if (val == 'manual')
       {
         this.disableShip = false
       }
       if (val == 'dada')
       {
         var id = this.id
         this.$store.dispatch('GetQueryDeliverFee', { id: id, type: this.shipType }).then(res => {
              if (res.data.status == 1)
              {
                this.disableShip = false
                this.forecastFee = res.data.result
              }
              else              {
                this.disableShip = true
                this.forecastFee = {
                  fee: -1,
                  deliveryNo: '',
                  distance: ''
                }
                return errorMsg(this, res.data.message)
              }
            })
       }
    },
    handleShip() {
      let vm = this
      if (this.shipType == 'manual')
      {
        this.$confirm('请再次确认是否发货。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          vm.$store
            .dispatch('ShipOrder', {
              id: this.id,
              ship_data: this.shipData
            })
            .then(
              res => {
                if (res.data.status == 1)                {
                  vm.$message({
                    type: 'success',
                    message: '发货成功!'
                  });
                  vm.showDia = false
                  this.$emit('refresh')
                }
                else                {
                  return errorMsg(vm, res.data.message)
                }
              })
        })
      }

      if (this.shipType == 'dada')
      {
        let param = {
          id: this.id,
          type: this.shipType,
          deliveryNo: this.forecastFee.deliveryNo
        }

        this.$confirm('请再次确认是否发货，发货后请注意短信接收送货订单状态。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          vm.$store
            .dispatch('addAfterQuery', param)
            .then(
              res => {
                if (res.data.status == 1)                {
                  vm.$message({
                    type: 'success',
                    message: '发货成功!'
                  });
                  vm.showDia = false
                  this.$emit('refresh')
                }
                else                {
                  return errorMsg(vm, res.data.message)
                }
              })
        })
      }
    },

  }
}
</script>

<style>
.order .card {
  padding: 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
</style>
